<template>
  <div>
    <Row>
      <Col :span="6" :offset="4">
        <img class="webHeaderLogo" src="@/assets/images/web_logo.jpg" alt="" />
      </Col>
      <Col :span="10">
        <Menu mode="horizontal" @select="handleSelect">
          <WebHeaderItem
            v-for="(item, index) in menuList"
            :key="index"
            :itemObj="item"
          />
        </Menu>
      </Col>
    </Row>
  </div>
</template>
<script>
import { Row, Col, Menu } from "element-ui";
import WebHeaderItem from "./WebHeaderItem";
export default {
  name: "WebHeader",
  data() {
    return {
      // 导航
      menuList: [
        {
          name: "首页",
          target: "/",
          icon: ""
        },
        {
          name: "关于我们",
          target: "/aboutUs",
          icon: ""
        },
        {
          name: "联系我们",
          target: "/contactUs",
          icon: "",
          children: [
            {
              name: "联系我们1",
              target: "/contactUs-1",
              icon: ""
            },
            {
              name: "联系我们2",
              target: "/contactUs-2",
              icon: ""
            }
          ]
        },
        {
          name: "联系我们2",
          target: "/contactUs2",
          icon: ""
        }
      ]
    };
  },
  computed: {},
  created() {},
  mounted() {},
  methods: {
    // 菜单选择事件
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    }
  },
  components: { Row, Col, Menu, WebHeaderItem }
};
</script>
<style lang="scss" scoped>
// logo
.webHeaderLogo {
  height: 40px;
  margin: 10px;
}
</style>
